<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
</head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/jquery-3.6.0.min.js}"></script>
<body>
<style>
    #goodsItemDiv>div{
        padding :10px;
    }

    /*[type=checkbox]{*/
    /*    width:15px;*/
    /*    height: 15px;*/
    /*}*/
</style>
<div class="layui-fluid">
    <div class="layui-row" style="margin-top: 50px">
        <div class="layui-col-md12">

            <div style="display: flex;">
                <i class="layui-icon layui-icon-left" style="margin-left: 10px;" onclick="window.location='/admin'"></i>
                <h2 style="color: red;margin-left: 15px;margin-right: 15px">我的订单</h2>

<!--                <div class=" layui-form layui-form-item">-->
<!--                        <select name="status" lay-filter="goodstatus">-->
<!--                            <option value="全部">请选择订单状态</option>-->
<!--                            <option value="待发货">待发货</option>-->
<!--                            <option value="运输中">运输中</option>-->
<!--                            <option value="退货中">退货中</option>-->
<!--                            <option value="已收货">已收货</option>-->
<!--                        </select>-->
<!--                </div>-->

            </div>
            <div style="border-top: solid lightgray 1px;border-bottom:solid lightgray 1px;font-size: 15px;padding: 10px">
                <span>图片</span>
                <span style="margin-left: 58px">标题</span>
                <span style="margin-left: 177px">价格</span>
                <span style="margin-left: 18px">数量</span>
                <span style="margin-left: 25px">小记</span>
                <span style="margin-left: 50px">买家</span>
                <span style="margin-left: 30px">收货地址</span>
                <span style="margin-left: 210px">下单时间</span>
                <span style="margin-left: 45px">订单状态</span>

            </div>

            <div id="orderDiv" >
                <div  style="display: flex;align-items: center;text-align:center;border-bottom: solid lightgray 1px;" th:each="o:${orderList}"  >


                    <div><img th:src="@{${o.goods.icon}}" style="width: 100px;height: 100px"/></div>
                    <div th:text="${o.goods.name}" style="width: 200px"></div>
                    <div><span th:text="${o.goods.price}" style="width: 30px;padding: 10px"></span></div>
                    <div th:text="${o.count}" style="width:30px;padding: 10px"></div>
                    <div th:text="${o.totalPrice}" style="width: 50px; padding: 10px"></div>
                    <div th:text="${o.buyer.name}" style="width: 100px" ></div>
                    <div th:text="${o.userAddress}"style="width: 250px;padding: 10px"></div>
                    <div th:text="${o.payTime}" style="width: 100px"></div>
                    <div th:text="${o.status}" style="width: 100px"></div>
                    <button class="layui-btn layui-btn-normal layui-btn-xs" th:if="${o.status=='待发货'}" th:id="'receive-'+${o.ono}">发货</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" th:id="'back-'+${o.ono}" th:if="${o.status=='退货中'}">同意退货</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" th:id="'back2-'+${o.ono}" th:if="${o.status=='退货中'}">拒绝退货</button>
                    <button class="layui-btn layui-btn-primary layui-btn-xs" th:id="'delete-'+${o.ono}" th:if="${o.status=='已收货'||o.status=='退款成功'}">删除</button>

                </div>

            </div>
    </div>
</div>
</div>

<script th:inline="javascript" type="text/javascript">



    $(function (){


        layui.use(['table','form','layer'],function(){
            var table=layui.table;
            var layer=layui.layer;
            var form=layui.form;

            //收货
            $("[id^=receive-]").click(function (){
                let cid=this.id.split('-')[1];
                layer.confirm('我发货了', {
                    btn: ['是的', '不是']},function (){
                    $.post('/buyer/order/receive1/' + cid, function (res) {
                        layer.msg(res.msg,{time:2000},function (){ window.location='/buyer/order/orderList2';})
                    })
                })
            })

            //退货
            $("[id^=back-]").click(function (){
                let cid=this.id.split('-')[1];
                layer.confirm('同意退货', {
                    btn: ['是的', '我想想']},function (){
                    $.post('/buyer/order/back1/' + cid, function (res) {
                        layer.msg(res.msg,{time:2000},function (){ window.location='/buyer/order/orderList2';})
                    })
                })
            })

            $("[id^=back2-]").click(function (){
                let cid=this.id.split('-')[1];
                layer.confirm('拒绝退货', {
                    btn: ['是的', '我想想']},function (){
                    $.post('/buyer/order/back2/' + cid, function (res) {
                        layer.msg(res.msg,{time:2000},function (){ window.location='/buyer/order/orderList2';})
                    })
                })
            })

            //删除
            $("[id^=delete-]").click(function (){
                let cid=this.id.split('-')[1];
                layer.confirm('真的要删除订单吗', {
                    btn: ['是的', '不要啊']},function (){
                        $.post('/buyer/order/delete2/' + cid, function (res) {
                            layer.msg(res.msg,{time:2000},function (){ window.location='/buyer/order/orderList2';})
                        })
                    })
                })


            // form.on('select(goodstatus)', function (data) {
            //     let statusType = data.value;

                // console.log(data.elem); //得到select原始DOM对象
                // console.log(data.value); //得到被选中的值
                // console.log(data.othis); //得到美化后的DOM对象


                // let orderDiv=$("#orderDiv")

                //
                //  $.post('/buyer/order/selectOrderByStatus/' + statusType,{},function (){
                //
                //  }
                //     layer.msg(res.msg)


                    // if (res.res) {
                    //     $("#orderDiv").empty();
                    //
                    //     layer.msg(res.msg)
                    //     let data = res.data;
                    //     for (let x = 0; x < data.length; x++) {
                    //         let orders = data[x];
                    //         let ordersItem = $(" <div  style=\"display: flex;text-align:center;align-items: center;border-top: solid lightgray 1px;\">\n" +
                    //             "\n" +
                    //             "                    <div><img  style=\"width: 100px;height: 100px\" src='" + orders.goods.icon + "'/></div>\n" +
                    //             "                    <div th:text=\"${o.goods.name}\" style=\"width: 200px\">"+orders.goods.name+"</div>\n" +
                    //             "                    <div><span th:text=\"${o.goods.price}\" style=\"width: 30px;padding: 10px\">"+orders.goods.price+"</span></div>\n" +
                    //             "                    <div th:text=\"${o.count}\" style=\"width:30px;padding: 10px\">"+orders.count+"</div>\n" +
                    //             "                    <div th:text=\"${o.totalPrice}\" style=\"width: 50px; padding: 10px\">"+orders.totalPrice+"</div>\n" +
                    //             "                    <div th:text=\"${o.seller.name}\" style=\"width: 100px\" >"+orders.seller.name+"</div>\n" +
                    //             "                    <div th:text=\"${o.userAddress}\"style=\"width: 250px;padding: 10px\">"+orders.userAddress+"</div>\n" +
                    //             "                    <div th:text=\"${o.payTime}\" style=\"width: 300px\">"+orders.payTime+"</div>\n" +
                    //             "                    <div th:text=\"${o.status}\" style=\"width: 100px\">"+orders.status+"</div>\n" +
                    //             "\n" +
                    //             "                </div>\n")
                    //         $(orderDiv).append(ordersItem);
                    //
                    //         }
                    //     }
                   // })


                // })
                form.render();
            })

    })
</script>
</body>

</html>